$(function () {

  //天气类型节点渲染
  var iconArr = ["#icon-wumai", "#icon-ganhan", "#icon-leidian", "#icon-dafeng",
    "#icon-neilao", "#icon-longjuanfeng", "#icon-bingbao  ", "#icon-jiangxue",
    "#icon-shanhong", "#icon-jiangyu"
  ]

  //请求天气类型数据发送ajax
  $.ajax({
    url: serverPort + '/ddApi/socialOb/getWeatherType',
    method: 'get',
    dataType: 'json',
    success(res) {
      var getWeatherType = res.data
      for (var i = 0; i < getWeatherType.length; i++) {
        var liDom = document.createElement('li')
        var ulDom = document.createElement('ul')
        liDom.innerHTML = '<p>' + getWeatherType[i].id + '</p><svg class="icon" aria-hidden="true"><use xlink:href=' + iconArr[i] + '></use></svg>' + getWeatherType[i].weatherTypeName
        ulDom.setAttribute("class", `ulDom${i}`); 

        //为新增节点div,添加类名，获取当前的样式 
        //挂载到dom树上
        $('.weather-type').append(liDom)
        $('.weather-type-detail').append(ulDom)

        //循环子节点
        var childrenType = getWeatherType[i].children

        for (var j = 0; j < childrenType.length; j++) {
          if (childrenType[j]) {
            var ulDomLChild = `
                  <li>${childrenType[j].weatherTypeName}<p>${childrenType[j].id}</p>
                      <span style='display: none'>${childrenType[j].weatherDes}</span>
                  </li>
              `
            $(`.ulDom${i}`).append(ulDomLChild)
            
          }
        }
      }
    },
    error(res) {de
      console.log(res)
    }
  });

  // 点击添加样式
  var typeNum;
  $(document).on('click', '.weather-type li', function () {

     typeNum = $(this).index()

    //weather-type
    $(".weather-type li").removeClass('active-type')
    $(this).addClass('active-type')

    //weather-type-detail 
    $('.weather-type-detail li').css({'height':0,'margin-bottom':0})
    $(`.weather-type-detail .ulDom${typeNum} li`).css({'height':'1.25rem','margin-bottom':'0.3rem'})
  })


  //点击显示天气介绍
  $(document).on('click', `.weather-type-detail li`, function () {

    var spanText = $(this).find('span').text()
    alert(spanText)
    
  })



  $(document).on('click', '.weather-type-detail li', function () {
    $(this).siblings().removeClass('active-type-list')
    $(this).addClass('active-type-list')
  })

  $('.now-location span').text(nowLocation)

  // 点击上传
  function submit(i,j,k) {

    var fm = new FormData();
    fm.append('file', j)
    fm.append('location', nowLocation)
    fm.append('openId', openId)
    fm.append('weatherType', Number(i))
    fm.append('remark', k)

    //发送ajax
    $.ajax({
      url: serverPort + '/ddApi/socialOb/addWeatherReal',
      method: 'POST',
      dataType: 'json',
      processData: false,
      contentType : false,
      data: fm,
      success(res) {
        alert('提交成功')
        window.history.back()
      },
      error(res) {
        console.log(res)
      }
    });
  }

  // 点击上传
  $('.submit').on('touchstart', function (e) {
    let wetherID = $('.weather-type-detail .active-type-list p').text() ? $('.weather-type-detail .active-type-list p').text() :$('.weather-type .active-type p').text();
    var picfile = $('#file2')[0].files.length === 0 ? $('#file').get(0).files[0] : $('#file2').get(0).files[0];
    let text = document.getElementsByClassName('upload-textarea')[0].value

    console.log(wetherID && picfile)

    if (wetherID && picfile) {

      submit(wetherID,picfile,text)

    } else {

      alert("请将信息填写完整再进行上传");
    }
     
  })
})